@import '~@/styles/variables.less';

.animation-button {
  width: 200px;
  height: 50px;
  position: relative;
  line-height: 50px;
  text-align: center;
  background-color: @navButton;
  font-size: 17px;
  font-weight: bold;
  color: @navText;
  cursor: pointer;
  overflow: hidden;
  border-radius: 30px;
  transition: all 0.3s ease 0s;
  pointer-events: all;
  user-select: none;

  &.active {
    background-color: @navButtonActive;
  }

  &:active {
    background-color: @navButtonActive;
    border-radius: 4px;
    transform: scale(1.1);
  }

  &:hover {
    border-radius: 4px;
    transform: scale(1.1);

    &::before {
      top: -50%;
    }

    &::after {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 40%;
    background-color: @navButtonHover;
    border: 4px solid @navText;
    z-index: -1;
    transition: all 0.5s ease 0s;
  }

  &::before {
    width: 100px;
    top: 100%;
    left: 50%;
    transform-origin: left center;
    transform: translateY(-50%) rotateZ(90deg);
  }

  &::after {
    top: 50%;
    left: 100%;
    transform: translate(-0%, -50%);
  }

  .other-item {
    // display: none;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;

    &::before,
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%) rotateZ(0deg);
      border: 4px solid @navText;
      background-color: @navButtonHover;
      transition: all 0.5s ease 0s;
    }

  }

  &:hover {
    .other-item::before {
      transform: translateY(-50%) rotateZ(20deg);
    }

    .other-item::after {
      transform: translateY(-50%) rotateZ(-20deg);
    }
  }
}